<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色</title>
    <script src="../layui/jquery-3.2.1.min.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="js/role.js"></script>
    <link href="../layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-container">
    <!-- 用户表单数据-->
    <table class="layui-table">
        <thead>
        <tr><th>角色名称</th><th>角色操作</th></tr>
        </thead>
        <tbody id="roleTableBody"></tbody>
    </table>
    <!-- 分页div-->
    <div id="cutPageDiv"></div>
    <a href="javascript:add()" class="layui-btn layui-btn-warm">
        <i class="layui-icon layui-icon-add-circle"></i>添加</a>


    <!-- 添加弹出 -->
    <div style="display: none" id="addDiv">
        <form id="addForm">
            <div id="role">
                角色名称：<input type="text" id="roleName" name="name" onblur="checkName()">
                <span id="nameSpan" style="color: red;font-weight: bold"></span>
            </div>
            <div id="root">

            </div>
        </form>
        <a href="javascript:addRole()" class="layui-btn layui-btn-warm">
            <i class="layui-icon layui-icon-add-circle"></i>添加</a>
    </div>

    <!-- 查看弹出 -->
    <div style="display: none" id="checkDiv">
        <div id="roleCheck">
            角色名称：<span id="roleSpan"></span>
        </div>
        <div id="rootCheck">
            拥有权限：<span id="rootSpan"></span>
        </div>
        <a href="" class="layui-btn layui-btn-warm">
            <i class="layui-icon layui-icon-add-circle"></i>返回</a>
    </div>

    <!-- 修改弹出 -->
    <div style="display: none" id="updateDiv">
        <form id="updateForm">
            <input type="hidden" name="id" id="id">
            <div id="roleUpdate">
                角色名称：<span id="updateNameSpan"></span>
            </div>
            <div id="rootUpdate">
                拥有权限：
            </div>
        </form>
        <a href="javascript:updateRole()" class="layui-btn layui-btn-warm">
            <i class="layui-icon layui-icon-add-circle"></i>修改</a>
        <a href="javascript:closeLayer()" class="layui-btn  layui-btn-danger">
            <i class="layui-icon layui-icon-add-circle"></i>取消</a>
    </div>


</div>
</body>
</html>